<template>
    <div class="bar-main" ref="barMain"></div>
</template>
<script>
import * as echarts from 'echarts/core';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import VueBus, {SET_MENU_SIZE} from '@/utils/VueBus';

export default {
    name: 'barMain',
    props: {
        title: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            myChart: null
        };
    },
    mounted() {
        const myChart = echarts.init(this.$refs['barMain']);
        // 绘制图表
        myChart.setOption(
            {
                title: {
                    text: this.title,
                    left: 'center'
                },
                tooltip: {},
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            },
            true
        );
        this.myChart = myChart;

        window.addEventListener('resize', this.onResize);
        VueBus.$on(SET_MENU_SIZE, this.onSetMenuSize);
    },
    destroyed() {
        this.myChart = null;

        window.removeEventListener('resize', this.onResize);
        VueBus.$off(SET_MENU_SIZE, this.onSetMenuSize);
    },
    methods: {
        onSetMenuSize() {
            clearTimeout(this.timeoutid);
            this.timeoutid = setTimeout(this.onResize, 300);
        },
        onResize() {
            this.myChart.resize();
        }
    }
};
</script>
<style lang="scss" scoped>
.bar-main {
    width: 100%;
    height: 300px;
    position: relative;
    z-index: 9;
}
</style>
